<template>
	<view class="" style="">
		<view class="fixed h-screen w-screen" style="z-index: -100; background: #9FC2E0; top: -2px; left:0">
			<image class="w-full" mode="widthFix" src="/static/login-bg.png"></image>
		</view>
		<view class="px-20 py-24 bg-white" style="width: 600rpx; border-radius: 16rpx; border: 1px solid #ddd;margin: auto; margin-top: 1000rpx;">
			<view class="mb-25 flex flex-row align-items-center flex-wrap text-14" >
				<view class="text-0 mr-5" style="width: 28rpx; height: 28rpx;" @tap="changeAgree">
					<image v-if="agree" class="w-full h-full" src="/static/icon-selected.png"></image>
					<image v-else class="w-full h-full" src="/static/icon-unselected.png"></image>
				</view>
				<view>阅读并同意<text class="" style="color: #2FA5FF;" @tap="open">飞兔企业用户协议</text></view>
			</view>
			<button v-if="agree" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="text-white round text-15" style="line-height: 76rpx; background-color: #56BE56; border-radius: 1000px;">一键登录</button>
			<view v-else class="text-white round text-15 text-center" style="line-height: 76rpx; background-color: #56BE56; border-radius: 1000px;" @tap="showConfirm">一键登录</view>
		</view>
		
		<uni-popup ref="popup" background-color="#fff" type="center" borderRadius="10px 10px 10px 10px">
			<view class="py-15 px-15 flex flex-col" style="width: 85vw; max-height: 90vh;min-height: 60vh;">
				<view class="flex-1">
					<rich-text :nodes="merchant_agreement"></rich-text>
				</view>
				<view class="flex-center text-white rounded-sm w-full text-14" style="background-color: #2FA5FF; line-height: 70rpx;" @tap="close">我已阅读并同意</view>
			</view>
		</uni-popup> 
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	export default {
		data() {
			return {
				agree: false,
				merchant_agreement: '',
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.getConfig();
		},
		onReachBottom() {
			
		},
		
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			// 获取用户电话
			getPhoneNumber(e){
				// console.log(e.detail.errMsg)
				// console.log(e.detail.errCode)
				// console.log(e.detail.code)
				var that = this;
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					request.post('/merchant/wxGetPhone', {
						code: e.detail.code
					}).then(res=>{
						let userinfo = that.userInfo;
						userinfo['phone'] = res.phone;
						that.setUserInfo(userinfo);
						uni.showToast({
							title: '登录成功！'
						})
						uni.navigateBack();
					})
				}
			},
			// 协议状态
			changeAgree(){
				this.agree = !this.agree
			},
			// 弹窗
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
				this.agree = true
			},
			// 获取协议
			getConfig(){
				request.post('/merchant/agreement').then(res=>{
					this.merchant_agreement = res.merchant_agreement;
				})
			},
			// 提示
			showConfirm(){
				uni.showToast({
					title: '请先阅读并同意用户协议',
					icon: 'none' 
				})
			}
		}
	}
</script>

<style>
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
